<template>
  <div class="product-form">
    <div class="blue-line">
      <h2>产品信息维护</h2>
    </div>
    <div style="height: 20px"></div>
    <div class="form-content">
      <h-form :model="queryItem" :label-width="80">
        <h-row>
          <h-col span="7">
            <h-form-item label="产品代码：" class="form-item">
              <h-input
                class="input"
                v-model="queryItem.code"
                style="margin-top: 0vh"
                placeholder="请输入产品代码"
              ></h-input>
            </h-form-item>
          </h-col>

          <h-col span="7" offset="1">
            <h-form-item label="产品名称：" class="form-item">
              <h-input
                class="input"
                v-model="queryItem.name"
                style="margin-top: 0vh"
                placeholder="请输入产品名称"
              ></h-input>
            </h-form-item>
          </h-col>

          <h-col span="7" offset="1">
            <h-form-item label="产品类型：" class="form-item">
              <h-select v-model="queryItem.type" style="width: 35vh">
                <h-option value="股票型">股票型基金</h-option>
                <h-option value="债券型">债券型基金</h-option>
                <h-option value="混合型">混合型基金</h-option>
                <h-option value="货币型">货币型基金</h-option>
                <h-option value="FOF">组合型基金</h-option>
                <h-option value="QDII">合格境内机构投资</h-option>
              </h-select>
            </h-form-item>
          </h-col>
        </h-row>

        <h-row>
          <h-col span="7">
            <h-form-item label="风险等级：" class="form-item">
              <h-select
                v-model="queryItem.risk"
                placeholder="请选择"
                style="width: 35vh"
              >
                <h-option value="R1">R1</h-option>
                <h-option value="R2">R2</h-option>
                <h-option value="R3">R3</h-option>
                <h-option value="R4">R4</h-option>
                <h-option value="R5">R5</h-option>
              </h-select>
            </h-form-item>
          </h-col>

          <h-col span="7" offset="1">
            <h-form-item label="产品状态：" class="form-item">
              <h-select
                v-model="queryItem.status"
                placeholder="请选择"
                style="width: 35vh"
              >
                <h-option value="开放">开放</h-option>
                <h-option value="暂停">暂停</h-option>
                <h-option value="售罄">售罄</h-option>
              </h-select>
            </h-form-item>
          </h-col>

          <h-col span="7" offset="1">
            <div class="button-row">
              <h-button-group size="large" shape="circle">
                <h-button
                  type="primary"
                  icon="android-search"
                  @click="queryProducts"
                  >查询</h-button
                >
                <h-button type="primary" icon="android-add" @click="addProduct"
                  >新增</h-button
                >
              </h-button-group>
            </div>
          </h-col>
        </h-row>
      </h-form>
    </div>
    <div>
      <h-table
        stripe
        :columns="columns1"
        :data="data1"
        height="265px"
        style="width: 100%"
      ></h-table>
    </div>
    <div style="height: 20px"></div>
    <div>
      <h-msg-box
        v-model="dialogVisible"
        title="修改产品信息"
        @on-ok="handleOk"
        @on-cancel="handleCancel"
      >
        <h-form :model="editedProduct">
          <h-form-item label="产品代码：" class="form-item">
            <h-input
              v-model="editedProduct.code"
              readonly
              class="input"
            ></h-input>
          </h-form-item>
          <h-form-item label="产品名称：" class="form-item">
            <h-input v-model="editedProduct.name" class="input"></h-input>
          </h-form-item>
          <h-form-item label="产品类型：" class="form-item">
            <h-select v-model="editedProduct.type">
              <h-option value="股票型">股票型基金</h-option>
              <h-option value="债券型">债券型基金</h-option>
              <h-option value="混合型">混合型基金</h-option>
              <h-option value="货币型">货币型基金</h-option>
              <h-option value="FOF">组合型基金</h-option>
              <h-option value="QDII">合格境内机构投资</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="风险等级：" class="form-item">
            <h-select v-model="editedProduct.risk">
              <h-option value="R1">R1(谨慎型)</h-option>
              <h-option value="R2">R2(稳健型)</h-option>
              <h-option value="R3">R3(平衡型)</h-option>
              <h-option value="R4">R4(进取型)</h-option>
              <h-option value="R5">R5(激进型)</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="产品状态：" class="form-item">
            <h-select v-model="editedProduct.status">
              <h-option value="在售">在售</h-option>
              <h-option value="售罄">售罄</h-option>
              <h-option value="暂停">暂停</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="剩余份额：" class="form-item">
            <h-input
              v-model="editedProduct.remain_share"
              class="input"
            ></h-input>
          </h-form-item>
          <h-form-item label="总的份额：" class="form-item">
            <h-input
              v-model="editedProduct.total_share"
              class="input"
            ></h-input>
          </h-form-item>
          <h-form-item label="产品净值：" class="form-item">
            <h-input v-model="editedProduct.net_worth" class="input"></h-input>
          </h-form-item>
        </h-form>
      </h-msg-box>

      <h-msg-box
        v-model="addProductDialogVisible"
        title="新增产品"
        @on-ok="handleOkAdd"
        @on-cancel="handleCancelAdd"
      >
        <h-form :model="formItem">
          <h-form-item label="产品代码：" class="form-item">
            <h-input v-model="formItem.code" class="input"></h-input>
          </h-form-item>
          <h-form-item label="产品名称：" class="form-item">
            <h-input v-model="formItem.name" class="input"></h-input>
          </h-form-item>
          <h-form-item label="产品类型：" class="form-item">
            <h-select v-model="formItem.type">
              <h-option value="股票型">股票型基金</h-option>
              <h-option value="债券型">债券型基金</h-option>
              <h-option value="混合型">混合型基金</h-option>
              <h-option value="货币型">货币型基金</h-option>
              <h-option value="FOF">组合型基金</h-option>
              <h-option value="QDII">合格境内机构投资</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="风险等级：" class="form-item">
            <h-select v-model="formItem.risk">
              <h-option value="R1">R1(谨慎型)</h-option>
              <h-option value="R2">R2(稳健型)</h-option>
              <h-option value="R3">R3(平衡型)</h-option>
              <h-option value="R4">R4(进取型)</h-option>
              <h-option value="R5">R5(激进型)</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="产品状态：" class="form-item">
            <h-select v-model="formItem.status">
              <h-option value="开放">开放</h-option>
              <h-option value="暂停">暂停</h-option>
            </h-select>
          </h-form-item>
        </h-form>
      </h-msg-box>

      <h-msg-box
        v-model="showDetail"
        title="产品详细信息"
        class="product-detail-modal"
      >
        <!-- TODO 改一下 -->
        <p slot="footer"></p>
        <div v-if="selectedProduct" class="product-detail-content">
          <h3>产品代码：{{ selectedProduct.code }}</h3>
          <h3>产品名称：{{ selectedProduct.name }}</h3>
          <h3>产品类型：{{ selectedProduct.type }}</h3>
          <h3>风险等级：{{ selectedProduct.risk }}</h3>
          <h3>产品状态：{{ selectedProduct.status }}</h3>
          <TrendChart :product="selectedProduct"></TrendChart>
        </div>
      </h-msg-box>
    </div>
    <div style="height: 10px"></div>
    <div>
      <h-page
        :current="currentPage"
        :total="totalItems"
        :page-size="pageSize"
        :simple="true"
        :show-total="true"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
        :show-elevator="true"
      ></h-page>
    </div>
  </div>
</template>

<script>
import TrendChart from "./TrendChart.vue";
import {
  productRegister,
  productDel,
  productChange,
  productSearch,
  productList,
} from "@/api/product";

export default {
  components: {
    TrendChart,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 10,
      selectedProduct: null,
      formItem: {
        code: "",
        name: "",
        type: "",
        risk: "",
        status: "",
        remain_share: 0,
        total_share: 0,
        net_worth: 0,
      },
      queryItem: {
        code: "",
        name: "",
        type: "",
        risk: "",
        status: "",
        remain_share: 0,
        total_share: 0,
        net_worth: 0,
      },
      columns1: [
        {
          title: "产品代码",
          key: "code",
        },
        {
          title: "产品名称",
          key: "name",
        },
        {
          title: "产品类型",
          key: "type",
        },
        {
          title: "风险等级",
          key: "risk",
        },
        {
          title: "产品状态",
          key: "status",
        },
        {
          title: "产品剩余份额",
          key: "remain_share",
        },
        {
          title: "产品总份额",
          key: "remain_share",
        },
        {
          title: "产品净值",
          key: "net_worth",
        },
        {
          title: "操作",
          key: "operation",
          width: 200,
          render: (h, params) => {
            return h(
              "h-button-group",
              {
                props: {
                  shape: "circle",
                },
              },
              [
                h(
                  "h-button",
                  {
                    props: {
                      type: "dashed",
                    },
                    on: {
                      click: () => {
                        this.editedProduct = { ...params.row };
                        this.dialogVisible = true;
                      },
                    },
                  },
                  "修改"
                ),
                h(
                  "h-button",
                  {
                    props: {
                      type: "dashed",
                    },
                    on: {
                      click: () => {
                        this.selectedProduct = { ...params.row };
                        this.showDetail = true;
                      },
                    },
                  },
                  "详情"
                ),
                h(
                  "h-button",
                  {
                    props: {
                      type: "dashed",
                    },
                    on: {
                      click: () => {
                        this.showDeleteConfirmation(params.row);
                      },
                    },
                  },
                  "删除"
                ),
              ]
            );
          },
        },
      ],
      data1: [
        {
          code: "HS-1",
          name: "平安基金",
          type: "货币",
          risk: "R1",
          status: "开放",
          remain_share: 1000,
          total_share: 1000,
          net_worth: 1.0,
        },
      ],
      dialogVisible: false,
      addProductDialogVisible: false,
      showDetail: false,
      editedProduct: {
        name: "",
        type: "",
        risk: "",
        status: "",
        remain_share: 0,
        total_share: 0,
        net_worth: 0,
      },
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    fetchData(type) {
      // 发起请求获取数据
      if (type === "分页") {
        this.fetchList();
      } else {
        this.queryProducts();
      }
    },

    fetchList() {
      productList({
        page: this.currentPage - 1,
        num: this.pageSize,
      })
        .then((res) => {
          this.data1 = res.data.data.content;
          this.totalItems = res.data.data.totalElements;
          this.$hMessage.success("获取数据成功");
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("获取数据失败");
        });
    },

    queryProducts() {
      console.log(this.currentPage - 1);
      console.log(this.pageSize);
      console.log(this.queryItem);
      productSearch({
        page: this.currentPage - 1,
        num: this.pageSize,
        code: this.queryItem.code,
        name: this.queryItem.name,
        type: this.queryItem.type,
        risk: this.queryItem.risk,
        status: this.queryItem.status,
      })
        .then((res) => {
          console.log(res);
          this.data1 = res.data.data.content;
          this.totalItems = res.data.data.totalElements;
          if (this.data1.length === 0) {
            this.$hMessage.warning("未查询到相关产品信息");
          } else {
            this.$hMessage.success("查询产品信息成功");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("查询产品信息失败");
        });
    },

    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },

    handlePageSizeChange(size) {
      this.pageSize = size;
      this.fetchData();
    },

    handleOk() {
      const index = this.data1.findIndex(
        (item) => item.code === this.editedProduct.code
      );
      if (index !== -1) {
        //TODO 发起请求修改产品信息
        console.log(this.editedProduct);
        delete this.editedProduct.revision;
        delete this.editedProduct.product_id;
        this.editedProduct.remain_share = Number(
          this.editedProduct.remain_share
        );
        this.editedProduct.total_share = Number(this.editedProduct.total_share);
        this.editedProduct.net_worth = Number(this.editedProduct.net_worth);
        productChange(this.editedProduct)
          .then((res) => {
            console.log(res);
            this.$hMessage.success("修改产品信息成功");
            this.fetchData("分页");
          })
          .catch((err) => {
            console.log(err);
            this.$hMessage.error("修改产品信息失败");
          });
      }
      this.dialogVisible = false;
      this.resetProduct();
    },

    handleCancel() {
      this.dialogVisible = false;
      this.resetProduct();
    },

    handleOkAdd() {
      this.$hMsgBox.confirm({
        title: "警告",
        content: "确定要添加产品吗？",
        onOk: () => {
          this.productRegister();
        },
        onCancel: () => {
          this.resetProduct();
        },
      });
    },

    productRegister() {
      //TODO: 发起请求新增产品信息
      console.log(this.formItem);
      productRegister(this.formItem)
        .then((res) => {
          console.log(res);
          this.$hMessage.success("新增产品信息成功");
          this.fetchData();
          this.addProductDialogVisible = false;
          this.resetProduct();
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("新增产品信息失败");
          this.resetProduct();
        });
    },

    handleCancelAdd() {
      this.addProductDialogVisible = false;
      this.formItem = {
        code: "",
        name: "",
        type: "",
        risk: "",
        status: "",
      };
    },

    cancelMethod() {
      this.showDetail = false;
      this.showTrendChart = false;
    },

    showDeleteConfirmation(editedProduct) {
      this.$hMsgBox.confirm({
        title: "警告",
        content: "确定要删除此产品信息吗？",
        onOk: () => {
          this.deleteProduct(editedProduct);
        },
        onCancel: () => {},
      });
    },

    addProduct() {
      this.editedProduct = {
        code: "",
        name: "",
        type: "",
        risk: "",
        status: "",
      };
      this.addProductDialogVisible = true;
    },

    deleteProduct(editedProduct) {
      const index = this.data1.findIndex(
        (item) => item.code === editedProduct.code
      );
      if (index !== -1) {
        // this.data1.splice(index, 1);
        //TODO: 发起请求删除客户信息
        productDel({
          code: editedProduct.code,
          name: editedProduct.name,
          type: editedProduct.type,
        })
          .then((res) => {
            console.log(res);
            this.$hMessage.success("删除产品信息成功");
            this.fetchData();
            if (res.data.result) {
              this.$hMessage.success("删除产品信息成功");
              this.fetchData();
            }
          })
          .catch((err) => {
            console.log(err);
            this.$hMessage.error("删除产品信息失败");
          });
      }
    },

    resetProduct() {
      this.editedProduct = {
        code: "",
        name: "",
        type: "",
        risk: "",
        status: "",
      };
      this.formItem = {
        code: "",
        name: "",
        type: "",
        risk: "",
        status: "",
      };
    },
  },
};
</script>

<style scoped>
.form-content {
  display: flex;
  flex-direction: column;
}

.button-row {
  display: flex;
  margin-left: 20px;
}

.h-select {
  width: 200px;
}

.product-detail-modal {
  width: 800px !important;
  max-height: 60% !important;
}

.product-detail-content {
  max-height: calc(100% - 200px) !important;
  overflow-y: auto;
}

.input {
  width: 35vh;
  margin-top: 0vh;
}

.blue-line {
  border-left: 3px solid #298dff;
  padding-left: 10px;
}
</style>